import * as React from 'react';
import Link_ from 'next/link';

export function Link({ href, children }) {
  return (
    <div className="link">
      <Link_ href={href} target="_blank">
        {children}
      </Link_>
      <style jsx>
        {`
          .link{
            display: inline-block;
            a{
              color: #5469d4;
              text-decoration: none;
              font-weight: 600;
            }
          }
          .link:hover {
            a{
              color: var(--color-geekblue-8);
            }
          }
        `}
      </style>
    </div>
  );
}
